import React, { useEffect, useState } from 'react';
import { Button } from 'antd'
import { CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import './buildingspace.scss'
import BuildingBasic from './BuildingBasic/BuildingBasic';
import BuildingRoom from './BuildingRoom/BuildingRoom';
export const BuildingSpace = (props) => {
    useEffect(() => {
        console.log(props.current, 'props');
    }, [])
    // 监听浏览器 回退没有
    window.onpopstate = function (event) {
        if (event.state !== null) {
            props.setIsBuildingSpace(false)
        }
    }

    const [spaceContent, setSpaceContent] = useState(true)
    // 按钮背景色
    const [buttonColor, setButtonColor] = useState("primary")
    const [buttonColor2, setButtonColor2] = useState("")
    // const [buildingfalse, setBuildingfalse] = useState(false)
    let usenavigate = useNavigate()
    // 返回父级
    const BuildingReturn = () => {
        props.setIsBuildingSpace(false)
        usenavigate('/home/Operate/BuildingInformationManagement')
    }

    const BuildingspaceContent = () => {
        if (spaceContent) {
            return <BuildingBasic buildingDetails={props.buildingDetails} />
        } else {
            return <BuildingRoom />
        }
    }

    return (
        <div className='buildingspace_box'>

            <div className='buildingspace_top'>
                <div className='buildingspace_kuai'>
                    <span></span>
                    <span>冬青楼楼宇详情</span>
                </div>

                <div className='buildingspace_button' >
                    <Button type={buttonColor} onClick={() => {
                        setButtonColor("primary")
                        setButtonColor2("")
                        usenavigate('/home/Operate/BuildingInformationManagement/BuildingSpace')
                        setSpaceContent(true)
                    }}
                    >
                        基本信息
                    </Button>

                    <Button type={buttonColor2} onClick={() => {
                        setButtonColor("")
                        setButtonColor2("primary")
                        usenavigate('/home/Operate/BuildingInformationManagement/BuildingSpace/BuildingRoom')
                        setSpaceContent(false)
                    }}>房间信息</Button>
                </div>

                <div className='buildingspace_signout'>
                    <CloseOutlined onClick={BuildingReturn} style={{ fontSize: 20, cursor: "pointer" }} />
                </div>
            </div>

            <div className='buildingspace_bottom'>
                {/* 子组件 */}
                <BuildingspaceContent />
            </div>

        </div>
    )
}


export default BuildingSpace